<script setup lang="ts">
import { Delete, Plus, Upload } from '@element-plus/icons-vue'
import { defaultPagingParams } from '../index'
import type { MeasurementLevelSumMap } from '../type'
import { PAGING } from '@/constant'
import type {
  DictionaryEncoInfo,
  EnergyBindItem,
} from '@/types'
import { energyApi, sysDictionaryEncoApi } from '@/api'
// ------------------use------------------
// #region
const props = defineProps<{
  measurementLevelSumMap: MeasurementLevelSumMap
}>()
const emits = defineEmits<{
  search: []
  reset: []
  plus: []
  upload: []
}>()
const query = defineModel({
  default: () => defaultPagingParams,
})
const [energyData, setEnergyData] = useState<
  EnergyBindItem[]
>([])
const [meteringLevel, setMeteringLevel] = useState<
  DictionaryEncoInfo[]
>([])

onBeforeMount(() => {
  getEnergyData()
  getMeteringLevel()
})

/** 重置 */
async function reset() {
  query.value = { ...defaultPagingParams }
  await nextTick()
  emits('reset')
}
async function search() {
  Object.assign(query.value, PAGING.PARAMS)
  await nextTick()
  emits('search')
}
async function getEnergyData() {
  const { data: res }
    = await energyApi.queryEnterpriseBindList()
  setEnergyData(res)
}
async function getMeteringLevel() {
  const { data: res }
    = await sysDictionaryEncoApi.queryList(
      'JI_LIANG_DENG_JI',
    )
  setMeteringLevel(res)
}
</script>

<template>
  <ElForm
    inline
    label-width="80px"
    label-position="left"
    class="flex-incompressible width-fill padding-bottom-xs relative"
  >
    <ElFormItem>
      <ContainSubRadio v-model="query.containSub" />
    </ElFormItem>
    <ElFormItem label="能源品种">
      <ElSelect
        v-model="query.energyId"
        placeholder="请选择能源品种"
        clearable
      >
        <ElOption
          v-for="item in energyData"
          :key="item.id"
          :value="item.energyId"
          :label="item.name"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem>
      <SearchButton @click="search" />
      <ElButton plain :icon="Delete" @click="reset">
        清空
      </ElButton>
      <ElButton
        plain
        type="success"
        :icon="Plus"
        @click="$emit('plus')"
      >
        新增
      </ElButton>
      <ElButton
        plain type="primary" :icon="Upload"
        @click="emits('upload')"
      >
        导入
      </ElButton>
    </ElFormItem>
    <p class="margin-0">
      {{
        meteringLevel
          .map(
            item =>
              `${item.dicValue}: &nbsp;${
                props.measurementLevelSumMap[
                  item.dicValue
                ] ?? 0
              }`,
          )
          .join(' &nbsp;, ')
      }}
    </p>
  </ElForm>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
p {
  position: absolute;
  bottom: 4px;
  left: 0px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
  // transform: translateY(100%);
}
//-------------样式穿透-------------
</style>
